<template>
  <div class="box">
    <el-form size="medium"  ref="addressForm" :model="obj" :rules="itemRules" label-width="100px">
      <el-form-item label="收货人" prop="consignee"><el-input placeholder="请输入收货人" v-model="obj.consignee"></el-input></el-form-item>

      <el-form-item label="联系电话" prop="iphone"><el-input placeholder="请输入联系号码" v-model="obj.iphone"></el-input></el-form-item>

      <el-form-item label="所在区域" prop="districtSelected">
        <!-- :disabled="order.status == '待发货' ? true : false" -->
        <el-cascader
          
          :options="options"
          v-model="obj.districtSelected"
          @change="districtSelect"
          ref="location"
          style="width:270px"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="详细地址" prop="address"><el-input placeholder="请输入详细地址" v-model="obj.address"></el-input></el-form-item>

      <el-form-item><el-button type="primary" @click="saveData">保存数据</el-button></el-form-item>
    </el-form>
  </div>
</template>
<script>
import {addressOrder} from '@/api/shop/order';
import {regionData, CodeToText, TextToCode} from 'element-china-area-data';

export default {
  name: 'orderAddress',
  data() {
    return {
      isLoading: false,
      obj: {
        id: this.order.id,
        address: this.order.address.split(',')[3],
        consignee: this.order.user_real_name,
        iphone: this.order.user_mobile,
        district: this.order.address
          .split(',')
          .slice(0, 3)
          .join(','),
        districtSelected: []
      },
      //address:this.order.address.split(',')[3],
      //district:'',
      //districtSelected: [],
      options: regionData,
      itemRules: {
        consignee: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入收货人'
          }
        ],
        iphone: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入收货人号码'
          }
        ],
        districtSelected: [
          {
            type: 'array',
            required: true,
            message: '请选择所在区域'
          }
        ],
        address: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入详细地址'
          }
        ]
      }
    };
  },
  computed: {
    // address(){
    //   return '111';
    // }
  },
  watch: {
    order: {
      handler: function() {
        //this.obj.id = this.order.id;
        //this.obj.address = this.order.address;
        //this.obj.consignee = this.order.user_real_name;
        //this.obj.iphone = this.order.user_mobile;
        // // //处理地址所在区域
        // let _d = [];
        // let _t;
        // if(this.order.address.indexOf(',') > -1){
        //   _t = this.order.address.split(',');
        // }else{
        //   _t = o.district.split(' ');
        // };
        // //拼接所在区域选择数组
        // _d[0] = TextToCode[_t[0]].code;
        // _d[1] = TextToCode[_t[0]][_t[1]].code;
        // _d[2] = TextToCode[_t[0]][_t[1]][_t[2]].code;
        // this.districtSelected = _d;
      }
    }
  },
  props: {
    order: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  created() {
    //处理地址所在区域
    let _d = [];
    let _t;
    if (this.order.address.indexOf(',') > -1) {
      _t = this.order.address.split(',');
    } else {
      _t = o.district.split(' ');
    }
    //拼接所在区域选择数组
    _d[0] = TextToCode[_t[0]].code;
    _d[1] = TextToCode[_t[0]][_t[1]].code;
    _d[2] = TextToCode[_t[0]][_t[1]][_t[2]].code;
    this.obj.districtSelected = _d;
  },
  mounted() {},
  methods: {
    //级联选择区域
    districtSelect(value) {
      let s = '';
      value.forEach(e => {
        s += CodeToText[e] + ',';
      });
      s = s.substring(0, s.length - 1);
      //对象赋值
      this.obj.district = s;
    },
    //保存数据(修改发货地址)
    saveData() {
      this.$refs.addressForm.validate(valid => {
        if (valid) {
          let o = {...this.obj};
          this.isLoading = true;
          //重新封装地址
          o.address = this.obj.district + ',' + this.obj.address;
          addressOrder(o)
            .then(res => {
              this.isLoading = false;
              this.$emit('success');
            })
            .catch(e => {
              this.isLoading = false;
            });
        } else {
          //console.log('error')
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 15px;
}

//选择商品
.proSelect {
  width: 100%;
  border: 1px solid #dcdfe6;
  //margin-bottom: 10px;

  .phead {
    background: #f4f6f8;
    font-weight: 700;
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #dcdfe6;

    .name {
      flex: 1;
      padding-left: 10px;
    }

    .count {
      width: 80px;
      text-align: center;
    }

    .status {
      width: 80px;
      text-align: center;
    }

    .action {
      width: 100px;
      text-align: center;
    }
  }

  ul {
    margin: 0;
    max-height: 210px;
    overflow-y: auto;

    li {
      display: flex;
      cursor: pointer;
      line-height: 40px;
      padding: 10px 0;
      font-size: 13px;
      border-bottom: 1px solid #dcdfe6;
      padding-left: 10px;

      &:last-child {
        border-bottom: none;
      }

      .pro {
        display: flex;
        flex: 1;

        .txt {
          display: flex;
          padding-left: 10px;
          flex: 1;
          line-height: 18px;
          align-items: center;

          .mark {
            color: #f56c6c;
            background: #f2f4f6;
            display: table;
            border-radius: 5px;
            padding: 0 3px;
            margin-right: 3px;
          }
        }
      }

      .count {
        width: 80px;
        text-align: center;
      }

      .status {
        width: 80px;
        text-align: center;

        &.done {
          color: #67c23a;
        }

        &.none {
          color: #f56c6c;
        }
      }

      .action {
        width: 100px;
        text-align: center;
      }
    }
  }
}

.el-input {
  width: 270px;
}

.box {
  width: 100%;
  /*padding: 60px;
  height: calc(100vh - 77px);
  overflow: scroll;*/
}
</style>
